<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">用户</el-breadcrumb-item>
      <el-breadcrumb-item :to="{ path: '/user/user_list' }">用户列表</el-breadcrumb-item>
      <el-breadcrumb-item>用户个人详情</el-breadcrumb-item>
    </el-breadcrumb>


<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>

<el-row>
  <!-- 头像 -->
      <el-col :span="5" ><div class="grid-wi bg-purple-light1">

    <el-col :offset="6" ><div class="grid-tx bg-purple-tx">

    <div>
      <el-avatar :size="130" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
    </div>
    
    </div></el-col>

    <el-col :offset="5" ><div class="grid-mz bg-purple-mz">用户名 :  {{userby.username}}</div></el-col>

      </div></el-col>

<!-- 表格 -->

  <el-col :span="19" ><div class="grid-nr bg-purple-light">

    <el-form :inline="true" class="f1" >

<el-form-item label-width="50px" label="昵称:">
<el-input
  :disabled="true"
  v-model="userby.nickName"
  class="wi">
</el-input>
</el-form-item>

<el-form-item label-width="50px" label="性别:">
<el-input
  :disabled="true"
  v-model="this.sex"
  class="wi">
</el-input>
</el-form-item>

<el-form-item label-width="50px" label="电话:">
<el-input
  :disabled="true"
  class="wi"
  v-model="userby.phone">
</el-input>
</el-form-item>

<el-form-item label-width="50px" label="积分:">
<el-input
  :disabled="true"
  class="wi"
  v-model="userby.points">
</el-input>
</el-form-item>

<el-form-item label-width="70px" label="QQ号码:">
<el-input
  :disabled="true"
  class="wi"
  v-model="userby.qq">
</el-input>
</el-form-item>

<el-form-item label-width="60px" label="经验值:">
<el-input
  :disabled="true"
  class="wi"
  v-model="userby.experienceValue">
</el-input>
</el-form-item>

<el-form-item label-width="100px" label="邮箱是否检测:">
<el-input
  :disabled="true"
  class="wi"
  v-model="this.isEmailCheck">
</el-input>
</el-form-item>
</el-form>

    </div></el-col>

</el-row>

<!-- 个人地址 -->
<i class="el-icon-s-flag f1">地址信息</i>

  <el-table
    :data="AddresList"
    height="250"
    border
    style="width: 100%">
    <el-table-column
      prop="username"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="phone"
      label="电话"
      width="180">
    </el-table-column>
    <el-table-column
      prop="contact"
      label="收货人"
      width="180">
    </el-table-column>
    <el-table-column
      prop="addressby"
      label="地址">
    </el-table-column>
  </el-table>

  <!-- 订单信息 -->
  <i class="el-icon-s-flag f1">订单信息</i>

  <el-table
    :data="orderList"
    height="500"
    border
    style="width: 100%">
    <el-table-column
      prop="id"
      label="订单ID"
      width="180">
    </el-table-column>
    <el-table-column
      prop="createTime"
      label="提交时间"
      width="180">
    </el-table-column>
    <el-table-column
      prop="username"
      label="用户名"
      width="180">
    </el-table-column>
    <el-table-column
      prop="totalMoney"
      label="订单金额">
    </el-table-column>
    <el-table-column
      prop="addressby"
      label="支付方式">
    </el-table-column>
    <el-table-column
      prop="addressby"
      label="订单来源">
    </el-table-column>
    
  </el-table>

  </div>
</template>

<script>
export default {
  data () {
    return {
      userby:{},
      sex:"男",
      isEmailCheck:"是",
      AddresList:[],
      orderList:[]
    }
  },
  methods: {

  },
  
    // 钩子函数
    async created () {
      const { data: res } = await this.$http.get(`/user/findById?username=${this.$route.query.username}`)
      const { data: res2 } = await this.$http.post(`/address/selectByAddress?username=${this.$route.query.username}`)
      const { data: res3 } = await this.$http.post(`/user/selectOrderList?username=${this.$route.query.username}`) 
     this.AddresList = res2
     this.orderList=res3
      this.userby=res
      //判断性别
      if(res.sex==0){
        this.sex="女"
      }
      //判断邮箱是否检测
      if(res.isEmailCheck==0){
        this.isEmailCheck="否"
      }
      //拼接地址
      for (let index = 0; index < res2.length; index++) {
         this.AddresList[index].addressby = res2[index].province+"-"+res2[index].city+"-"+res2[index].area+"-"+res2[index].address
      }

      //判断订单状态
      //    for (let index = 0; index < this.orderList.length; index++) {
      // if(this.orderList[index].orderStatus==0){
      //   this.orderList[index].orderStatus="女"
      // }
      // if(this.orderList[index].orderStatus==1){
      //     this.orderList[index].orderStatus="男"
      // }
      //    }
    }
}
</script>

<style>
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple-light {
    background: #d3d3e9;
  }
  .bg-purple-light1 {
    background: #b5b6c4;
  }
  .bg-purple-tx {
    background: #b5b6c4;
  }
  .bg-purple-mz {
    background: #b5b6c4;
  }
  .grid-content {
    min-height: 36px;
  }
  .grid-nr{
    min-height: 200px;
  }
  .grid-wi{
    min-height: 200px;
    width: 262px;
  }
  .grid-tx{
    min-height: 150px;
    width: 150px;
  }
  .grid-mz{
    min-height: 50px;
    width: 190px;
  }
  .wi{
    width: 180px;
  }
  .f1{
    padding-top: 40px;
  }
</style>
